// Non-semantic helper classes

// Credit where credit is due
// Much inspiration was taken from the HTML5 Boilerplate

// For image replacement
.ir {
  display: block;
  text-indent: -999em;
  overflow: hidden;
  background-repeat: no-repeat;
  text-align: left;
  direction: ltr;
}

.image-replacement {
  @extend .ir;
}

// Hide for both screenreaders and browsers:
// css-discuss.incutio.com/wiki/Screenreader_Visibility

.hidden {
  display: none;
  visibility: hidden;
}

// Hide visually only but have it available for screenreaders by Jon Neal
// webaim.org/techniques/css/invisiblecontent also j.mp/visuallyhidden

.visuallyhidden {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  &.focusable {
    &:active, &:focus {
      clip: auto;
      height: auto;
      margin: 0;
      overflow: visible;
      position: static;
      width: auto;
    }
  }
}

.visually-hidden, .vh {
  @extend .visuallyhidden;
}

// Hide visually and from screenreaders but maintain layout

.invisible {
  visibility: hidden;
}

.clearfix {
  @include pie-clearfix;
}
